<template>
  <div class="about">
    <!-- 给购物车组件传参 -->
    <cart-com  :cart-list="mycart"
     myname="刘德华" 
     week="周三"
     month="12月"
     @send="getRow"
     ref="cartList"
    >
          <template #content>
              <h1>我是内容的插槽</h1>
          </template>
         <template #footer>
              <h1>我是脚步的插槽内容</h1>
          </template>
  
    </cart-com>

    <h1>This is an about page</h1>
    <h1>{{count}}</h1>
      <h1>计算属性：{{douCount}}</h1>
      <button @click="toChange">改变</button>
  </div>
</template>
<script>
import {useCount} from './hooks/countHook'
import cartCom from './cart/index.vue'
import {ref,onMounted} from 'vue'
export default {
  components:{cartCom},
  mounted() {
   
  },
  setup(){
      let {count,toChange,douCount}=useCount()

    let mycart=ref([
      {name:'手机',price:1000},
      {name:'电脑',price:2000},
    ])
    // 接收子传父的数据
    let getRow=(row)=>{
        console.log(row,"子传父的数据","---------")
    }
    //新： vue3 使用 ref 获取子组件 
    let cartList=ref();
    //  新 onMounted vue3的组件挂载后 
    onMounted(()=>{
      // 调用子组件的方法
      cartList.value.sayHi()
      // 使用子组件的数据
      console.log(cartList.value.myCarName)
    })

      return {
        count,
        toChange,
        douCount,
        mycart,
        getRow,
        cartList
      }
  }
}
</script>
